---
id: component-api
slug: component-api
hide_title: true
sidebar_label: Component API
title: Component API
description: The reactjs-popup API is inspired by semantic popup docs
---

<!-- import InputFocus from './../examples/InputFocus.js' -->

# Component API

This is the list of props that you should probably know about👇

### trigger

> {node,func} | require

Element to be rendered in-place where the popup is defined

```jsx
// need to forward ref if you are trying to use a function trigger with React Component

// Works
<Popup
  trigger={open => (
    <button className="button">Trigger - {open ? 'Opened' : 'Closed'}</button>
  )}
  position="right center"
  closeOnDocumentClick
>
  <span> Popup content </span>
</Popup>;

// works too
const CustomButton = React.forwardRef(({ open, ...props }, ref) => (
  <button className="button" ref={ref} {...props}>
    Trigger - {props.open ? 'Opened' : 'Closed'}
  </button>
));

<Popup
  trigger={open => <CustomButton open={open} />}
  position="right center"
  closeOnDocumentClick
>
  <span> Popup content </span>
</Popup>;
```

#### open

> {bool}

Take full control over the popup state.

#### defaultOpen

> bool | false

Default open value : initial state

### on

> enum,Array | `'hover'`

Events triggering the popup. Enums or Array of : `'hover' 'click' 'focus' 'right-click'` .

### children

> node or func

Popup content

### position

> {enum, Array} | `'bottom center'`

Position for the popover. Best position(calculated by checking against overlap with boundary element) is applied in the order specified. <br /> Enums:`'top left' 'top right' 'bottom right' 'bottom left' 'right center' 'left center' 'top center' 'bottom center' 'center center'`

### offsetX

> number | 0

OffsetX in pixels to be applied to the Popup.

### offsetY

> number | 0

OffsetY in pixels to be applied to the Popup.

### arrow

> bool | true

Arrow element. Note that this should be set to `false` if the position is set to `'center center'`

### modal

> bool| false

A modal component when modal ={true}

### disabled

> bool | false

Disable the popup from showing up and close it if it's open

### lockScroll

> bool | false

Disable body scroll when modal is open ( work only with modal)

### closeOnDocumentClick

> bool | true

Close popup when the overlay clicked

### closeOnEscape

> bool | true

Close popup when Escape clicked

### repositionOnResize

> bool | true

Recalculate position when `window` is resized

### mouseEnterDelay

> number | 100
> Milliseconds to wait before opening on mouse over

### mouseLeaveDelay

> number | 100

Milliseconds to wait before closing on mouse leave

### onOpen

> func

A function called on open event

### onClose

> {func}

A function called on close event

### contentStyle

> object

Custom popup content style |

### overlayStyle

> object

Custom overlay style <br/> Note: `top` and `left` property will not be overridden. |

### arrowStyle

> object

Custom arrow style <br/> Note: `transform` property will not be overridden. |

### className

> string

Custom Popup ClassName <br/> Note: this class name will be merged with the component element: ex `className='foo'` means `foo-arrow` to style arrow, `foo-overlay` to style overlay and `foo-content` to style popup content |

### keepTooltipInside

> bool, string | true

Html selector, class name or id element that the tooltip must be inside (defaults to `window` if keepTooltipInside = true) default false |

### nested

> bool | false

Starting from v2 you should add nested props if you are going to use nested popups ( to make sure `onClickOutside` behavior will work as expected)
